﻿@media screen and (max-width: 767px) {
    html {
        background-color: skyblue;
    }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    html {
        background-color: lightgray;
    }

    .container {
        margin: 0;
        padding: 0;
    }
    .row {
        overflow: hidden;
        width: 100%;
    }

    #content {overflow: hidden;}
    #main_aside{float:left; margin-top: 10px; margin-left:5px; margin-right: -5px;}
    #main_section {float: left; margin-left: 10px; margin-right: -10px;}

    .span_1 {
        width:6.5%;
    }
    .span_2 {
        width:15%;
    }
    .span_3 {
        width:23.5%;
    }
    .span_4 {
        width:32%;
    }
    .span_5 {
        width:40.5%;
    }
    .span_6 {
        width:49%;
    }
    .span_7 {
        width:57.5%;
    }
    .span_8 {
        width:66%;
    }
    .span_9 {
        width:74.5%;
    }
    .span_10 {
        width:83%;
    }
    .span_11 {
        width:91.5%;
    }
    .span_12 {
        width:100%;
    }
}

@media only screen and (min-width: 960px){
    html {
        background-color: white;
    }
    .container {
        width: 960px;
        margin: 0 auto;
    }
    .row {
        overflow: hidden;
        margin-left: 10px;
        margin-right: 10px;
    }

    #main_section {
        margin-right: -10px;
        margin-left: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #main_aside { 
        margin-top: 10px;
        margin-left: 5px;
        margin-right: -5px;
        margin-bottom: 10px;
    }

    .span_1, .span_2, .span_3, .span_4,
    .span_5, .span_6, .span_9, .span_8,
    .span_9, .span_10, .span_11, .span_12 {
        float: left;
    }

    .span_1 {width:60px;}
    .span_2 {width:140px;}
    .span_3 {width:220px;}
    .span_4 {width:300px;}
    .span_5 {width:380px;}
    .span_6 {width:460px;}
    .span_7 {width:540px;}
    .span_8 {width:620px;}
    .span_9 {width:700px;}
    .span_10 {width:780px;}
    .span_11 {width:860px;}
    .span_12 {width:960px;}
}
